<template>
  <el-main class="user-userinfo">
    <div>
      <el-avatar :size="100" style="font-size: 200%">{{avatar}}</el-avatar>
    </div>
    <el-form :model="docInfo" :disabled="disabled">
      <div class="row">
        <el-form-item class="col-sm-6" label="姓名">
          <el-input v-model="docInfo.docName"></el-input>
        </el-form-item>
        <el-form-item class="col-sm-6" label="个人工号">
          <el-input v-model="docInfo.docId"></el-input>
        </el-form-item>
      </div>
      <div class="row">
        <el-form-item  class="col-sm-6" label="性别">
          <el-input v-model="docInfo.docSex"></el-input>
        </el-form-item >
        <el-form-item  class="col-sm-6" label="年龄">
          <el-input v-model="docInfo.docAge"></el-input>
        </el-form-item >
      </div>
      <div class="row">
        <el-form-item class="col-sm-6" label="身份证号">
          <el-input v-model="docInfo.docIdNumber"></el-input>
        </el-form-item >
        <el-form-item class="col-sm-6" label="所属科室">
          <el-input v-model="docInfo.docDepartment"></el-input>
        </el-form-item >
      </div>
      <div class="row">
        <el-form-item class="col-sm-6" label="职称">
          <el-input v-model="docInfo.docJobTitle"></el-input>
        </el-form-item >
        <el-form-item class="col-sm-6" label="主治方向">
          <el-input v-model="docInfo.mainDirection"></el-input>
        </el-form-item >
      </div>
    </el-form>
    <div class="edit-button">
      <el-button type="primary" @click.stop="editUserInfo">{{btnTitle}}</el-button>
      <el-button v-show="!disabled" @click.stop="cancelEdit">取消</el-button>
    </div>
  </el-main>
</template>
<script>
export default {
  data(){
    return {
      docInfo:{},
      disabled: true
    }
  },
  computed:{
    avatar(){
      return this.docInfo.docName
    },
    btnTitle(){
      return this.disabled?"编辑":"保存"
    }
  },
  methods:{
    cancelEdit(){
      this.disabled = true;


    },
    async editUserInfo(){
      if (this.disabled){

      }else{
        this.$util.errorMessage(result.msg)
        return null
      }
      this.disabled = !this.disabled
    },

  },
  mounted() {

  }
}
</script>


